<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-19 08:46:02
 * @LastEditTime: 2021-08-02 10:00:08
 * @Description: 缺陷详情
-->

<template>
    <div id="defectList_page">
        <!-- 顶部导航 -->
        <van-nav-bar title="缺陷详情" left-arrow @click-left="back" :border="true" fixed>
            <template slot="right">
                <div class="parent-circle">
                    <div class="child-circle"></div>
                </div>
            </template>
        </van-nav-bar>
        <!-- 主体区域 -->
        <div class="mainPart">
            <!-- 缺陷发现信息 -->
            <div class="findInfoPart">
                <div class="title">
                    <span class="colorBlock"></span>
                    <span class="text">缺陷信息</span>
                </div>
                <div class="contentPart">
                    <div class="item">
                        <span class="label">变电站：</span>
                        <span class="content">{{detail.substationName}}</span>
                    </div>
                    <div class="item">
                        <span class="label">设备名称：</span>
                        <span class="content">{{detail.deviceName}}</span>
                    </div>
                    <div class="item">
                        <span class="label">缺陷部位：</span>
                        <span class="content">{{detail.defectPositionText}}</span>
                    </div>
                    <div class="item">
                        <span class="label">分类依据：</span>
                        <span class="content">{{detail.classificationStandardText}}</span>
                    </div>
                    <div class="item">
                        <span class="label">缺陷性质：</span>
                        <span class="content">{{detail.defectNatureText}}</span>
                    </div>
                    <div class="item">
                        <span class="label">缺陷描述：</span>
                        <span class="content">{{detail.defectDescText}}</span>
                    </div>
                    <div class="item">
                        <span class="label">发现人：</span>
                        <span class="content">{{detail.findUserName}}</span>
                    </div>
                    <div class="item">
                        <span class="label">发现方式：</span>
                        <span class="content">{{detail.findWay}}</span>
                    </div>
                    <div class="item">
                        <span class="label">缺陷内容：</span>
                        <span class="content">{{detail.defectContent}}</span>
                    </div>
                    <div class="item">
                        <span class="label">缺陷状态：</span>
                        <span class="content">{{detail.defectStatus|defectStatusFilter}}</span>
                    </div>
                </div>
            </div>
            <div class="filePart" v-if='detail.DeImgOrVideoList.length>0'>
                <div>附件：</div>
                <img :src="imgItem.url" style="margin-left: 10px;" v-for="(imgItem,i) in detail.DeImgOrVideoList"
                    :key="i">
            </div>
            <div class="btnBox" v-if='detail.defectStatus=="1"'>
                <div class="noPass" @click='shShow=true'>不通过</div>
                <div class="pass" @click="pass('yes')">审核通过</div>
            </div>
        </div>
        <van-popup v-model="shShow">
            <div class="auditBox">
                <van-field v-model="reason" rows="3" maxlength="255" type="textarea" placeholder="请输入审核不同过原因" />
                <div class="btnBoxSh">
                    <div class="noPass" @click='shShow=false'>取消</div>
                    <div class="pass" @click="pass('no')">确认</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script type="text/javascript">
    import Utils from '@/utils/util'
    import { updateAuditStatus } from "../../api/defect"
    export default {
        name: "defectList",
        data() {
            return {
                detail: {},
                reason: "",
                shShow: false,// 审核原因控制器
                userInfo: JSON.parse(localStorage.getItem('userInfo'))
            }

        },
        created() {
            // 获取缺陷详情
            this.detail = this.$route.query.item
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.back();
            },

            /**
             * @description: 审核
             * @param {*} type
             * @return {*}
             */
            pass(type) {
                var self = this
                var params = {
                    "defectStatus": "2",// 缺陷状态
                    "auditorName": self.userInfo.userName,// 审核人
                    "defectId": self.detail.defectId,// 缺陷id
                    "reason": self.reason,// 不通过原因
                    "roleCode": "",
                    "userId": self.userInfo.userId// 用户id
                }
                if (type == 'no') {// 如果选择的未不通过
                    params.defectStatus = 0
                    if (Utils.baseUtil.isEmptyString(self.reason)) {
                        self.$toast("请输入不通过原因！")
                        return
                    }
                } else {
                    params.defectStatus = 2
                    self.reason = ""
                }
                // 提交审核
                updateAuditStatus(params).then(res => {
                    if (res.success) {
                        self.$toast.success("审核成功")
                        self.$router.go(-1)
                        if (self.shShow) {
                            self.shShow = false
                        }
                    } else {
                        self.$toast("审核失败")
                    }
                }).catch(err => {
                    self.$toast("审核失败")
                })
            },

            /**
             * @description: 获取缺陷详情
             */
            getDetail() {
                var self = this
                var params = {
                    userId: "",//用户id(必传)
                    roleCode: "",//用户角色
                    defectId: "",//缺陷id(必传)
                }
                GetDetail(params).then(function (res) {
                    self.$toast.clear()
                    if (res.success) {
                        self.detail = res.data
                    }
                }).catch(err => {
                    self.$toast.clear()
                });
            }
        },
        watch: {
            shShow(val) {
                if (!val) {
                    this.reason = ""
                }
            }
        },
        filters: {
            defectStatusFilter(val) {
                switch (val) {
                    case "0":
                        return "缺陷登记"
                    case "1":
                        return "班组审核"
                    case "2":
                        return "检修专责审核"
                    case "3":
                        return "消缺安排"
                    case "4":
                        return "缺陷入池"
                    case "5":
                        return "缺陷处理"
                    case "6":
                        return "缺陷验收"
                    case "7":
                        return "验收"
                    default:
                        break;
                }
            }
        }
    }
</script>
<style scoped>
    #defectDetail_page {
        width: 100%;
        height: 100%;
        padding-bottom: 0;
        background: #fff;
    }

    .van-nav-bar {
        background: #17b49b;
    }

    .van-nav-bar /deep/ .van-icon {
        color: #fff;
        font-size: 22px;
    }

    .van-nav-bar /deep/ .van-nav-bar__title {
        color: #fff;
        font-size: 18px;
    }

    /* 主体区域 */
    .mainPart {
        padding: 20px;
        padding-top: 66px;
        background: #fff;
        font-size: 16px;
        height: 100vh;

    }

    .mainPart .colorBlock {
        display: inline-block;
        width: 4px;
        height: 18px;
        background: #17b49b;
        margin-right: 10px;
    }

    .mainPart .title {
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        color: #333333;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
    }

    .mainPart .contentPart {
        background: #fafafa;
        padding: 10px;
    }

    .mainPart .contentPart .item {
        display: flex;
        justify-content: space-between;
        margin: 5px 0;
    }

    .mainPart .contentPart .label {
        display: inline-block;
        width: 90px;
        /* text-align: right; */
        color: #999;
    }

    .mainPart .contentPart .content {
        width: calc(100% - 90px);
        color: #333;
        text-align: right;
    }

    .findInfoPart {
        margin-bottom: 20px;
    }

    .filePart img {
        width: 80px;
        height: 80px;
        margin-top: 20px;
    }

    .btnBox {
        width: 100%;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btnBoxSh {
        width: 100%;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }

    .btnBox>div {
        width: 6rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        border-radius: 8px;
    }

    .btnBoxSh>div {
        width: 6rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        border-radius: 8px;
    }

    .noPass {
        background-color: #fff;
        text-align: center;
        color: #000;
        margin-right: 0.5rem;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(51, 51, 51, 1);
    }

    .pass {
        color: #fff;
        margin-left: 0.5rem;
        background: inherit;
        background-color: rgb(24, 181, 156);
        border: none;
    }

    .auditBox {
        width: 80vw;
        height: 12rem;
        background-color: #fff;
    }

    .van-popup--center {
        border-radius: 12px 12px 5px 5px;
    }

    .van-cell {
        background-color: rgba(242, 242, 242, 1) !important;
        height: 110px !important;
        border-radius: 4px;
        width: 95%;
        margin: 0 auto;
        margin-top: 1rem;
    }
</style>